<template>
  <div class="info">
    <header>
      <slot></slot>
    </header>
    <el-form ref="form" :model="data" label-width="80px">
      <el-form-item label="商品名称">
        <el-input v-model="data.name" :readonly="readonly" class="ipt1"></el-input>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input v-model="data.subtitle" :readonly="readonly" class="ipt1"></el-input>
      </el-form-item>
      <el-form-item label="当前状态" v-show="readonly">
        <el-input :value="data.status==1?'在售':'已下架'" class="ipt1"></el-input>
      </el-form-item>

      <el-form-item label="所属分类">
        <el-select
          v-model="data.parentCategoryId"
          placeholder="请选择活动区域"
          @change="change(data.parentCategoryId)"
        >
          <el-option
            v-for="(item, index) in parentCategoryList"
            :key="index"
            :label="item.name"
            :value="item.id"
            :disabled="readonly"
          ></el-option>
        </el-select>
        <el-select v-model="data.categoryId" placeholder="请选择活动区域" v-show="categoryList.length>0">
          <el-option
            v-for="(item, index) in categoryList"
            :key="index"
            :label="item.name"
            :value="item.id"
            :disabled="readonly"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品价格">
        <el-input
          placeholder="价格"
          v-model="data.price"
          type="number"
          :readonly="readonly"
          class="ipt2"
        >
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="商品库存">
        <el-input
          placeholder="价格"
          v-model="data.stock"
          type="number"
          :readonly="readonly"
          class="ipt2"
        >
          <template slot="append">件</template>
        </el-input>
      </el-form-item>
      <el-form-item label="商品图片">
        <img :src="data.imageHost+data.mainImage" alt width="100px" />
        <!-- <img :src="data.imageHost+data.subImages" alt="" width="100px"> -->
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          list-type="picture"
        >
          <el-button size="small" type="primary" v-show="!readonly">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品详情">
        <!-- <el-input type="textarea" v-model="data.detail" :readonly="readonly" ></el-input> -->
        <quill-editor
          v-model="data.detail"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)">
        </quill-editor>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" v-show="!readonly">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { saveProduct } from "../../util/netWork";



export default {
  props: ["data", "parentCategoryList", "categoryList", "readonly"],
  data() {
    return {
      editorOption:{}
      
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    onSubmit() {
      var data = {
        categoryId: this.data.categoryId,
        name: this.data.name,
        subtitle: this.data.subtitle,
        subImages: this.data.subImages,
        detail: this.data.detail,
        price: this.data.price,
        stock: this.data.stock,
        status: this.data.status,
        id: this.data.id
      };
      saveProduct(data).then(res => {
        if (res.status == 0) {
          alert(res.data);
        } else {
          alert(res.data);
        }
      });
    },
    change(data) {
      this.$emit("categoryHttp2", data);
    },
    onEditorBlur(quill) {
        // console.log('editor blur!', quill)
      },
      onEditorFocus(quill) {
        // console.log('editor focus!', quill)
      },
      onEditorReady(quill) {
        // console.log('editor ready!', quill)
      },
      onEditorChange({ quill, html, text }) {
        // console.log('editor change!', quill, html, text)
        this.content = html
      }
  },
  mounted(){
    
      this.$refs.myQuillEditor.quill.enable(false);
      this.$refs.myQuillEditor.quill.blur();
        
  }
 
};
</script>

<style lang="scss" scoped>
@import "@/assets/mixinScss.scss";
header {
  @include FontSize(30px);
  @include Size(100%, 100px);
  line-height: 100px;
  box-sizing: border-box;
  padding-left: 20px;
}
.ipt1 {
  width: 300px;
}
.ipt2 {
  width: 230px;
}
.ipt3 {
  width: 500px;
}
</style>